<template>
  <div class="app-container" style="background-color:transparent ;height: 100%; width: 100%;">
    <el-form ref="form" :model="form" :rules="formRules">
      <el-form-item prop="amount">
        <el-input
          ref="amount"
          v-model="form.amount"
          placeholder="请输入金额"
          name="amount"
          type="number"
          tabindex="1"
          auto-complete="on"
          v-focus
          @keyup.enter.native="authCodeFocus"
        />
      </el-form-item>

      <el-form-item prop="auth_code">
        <el-input
          ref="auth_code"
          v-model="form.auth_code"
          placeholder="扫顾客付款条码"
          name="auth_code"
          type="text"
          tabindex="1"
          auto-complete="on"
          @keyup.enter.native="payCode"
        />
      </el-form-item>

      <el-form-item v-show="false">
        <el-button :loading="loading" type="primary" style="width: 61%" @click="onSubmit">收银</el-button>
      </el-form-item>

      <el-form-item>
        <template v-if="payResult !==null">
                <span v-if="payResult.pay_status === 'FAIL'" class="order-current">
                    失败&nbsp;{{form.amount}}
                </span>
          <span v-else class="order-current" style="background-color: green">
                    成功&nbsp;{{form.amount}}
                </span>
        </template>

        <template v-for="(item,index) in list">
                <span v-if="item.paymentStatus === '1'" class="order-history">
                <el-tag class="permission-tag-succeed" size="big">成功</el-tag>
                ¥{{item.orderAmount}}&nbsp;&nbsp;{{item.createdTime.substring(5)}}<br>
                {{paymentStatusLabel(item.paymentMethod)}}
              </span>

          <span v-else-if="item.paymentStatus==='0'" class="order-history">
              <el-tag class="permission-tag-wait" size="big">等待️</el-tag>
                ¥{{item.orderAmount}}&nbsp;&nbsp;{{item.createdTime.substring(5)}}<br>
                {{paymentStatusLabel(item.paymentMethod)}}
              </span>

          <span v-else class="order-history">
              <el-tag class="permission-tag-fail" size="big">失败️</el-tag>
                ¥{{item.orderAmount}}&nbsp;&nbsp;{{item.createdTime.substring(5)}}<br>
                {{paymentStatusLabel(item.paymentMethod)}}
              </span>
        </template>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>

import { mapGetters } from 'vuex'
import { pay } from '@/api/pay'
import { ipcRenderer } from 'electron'
import path from 'path'
import { getOrderList } from '@/api/order'

// 已下为插入内容
const BrowserWindow = require('electron').remote.BrowserWindow

export default {
  computed: {
    ...mapGetters([
      'rq_code',
      'user_id'
    ])
  },
  data() {
    const validateMoney = (rule, value, callback) => {
      console.log('module/pay -> validateMoney =>' + value)
      if (!value) {
        callback(new Error('金额输入有误'))
      } else if (value.indexOf('.') !== -1 && value.split('.')[1].length > 2) {
        // 防止输入多个小数点
        callback(new Error('最多两位小数'))
      } else {
        callback()
      }
    }
    return {
      listLoading: true,
      payResult: null,
      list: null,
      loading: false,
      form: {
        amount: '',
        auth_code: ''
      },
      formRules: {
        amount: [
          { required: false, tigger: 'blur', validator: validateMoney }
        ]
      },
      listQuery: {
        pageNum: 1,
        pageSize: 3,
        startTime: new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(),
        endTime: new Date().getTime()
      },

    }
  },
  created() {
    this.fetchData()
  },
  destroyed() {
    localStorage.setItem('fc_window_switch', 'off')
  },
  methods: {
    fetchData() {
      getOrderList(this.listQuery).then(response => {
        console.log(response)
        this.list = response.rows
        console.log(this.list)
      })
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const params = {
            'rq_code': this.rq_code,
            'amount': this.form.amount,
            'client_type': 'ac',
            'auth_code': this.form.auth_code,
            'user_id': this.user_id
          }
          console.log('pay', params)
          pay(params).then(res => {
            this.loading = false
            if (res != null && res.code === 0) {
              if (res.data.pay_status === 'FAIL') {
                this.payResult = res.data
                this.fetchData()
              } else {
                this.gm_error('支付失败')
              }
            } else {
              this.gm_error('支付失败')
            }
          })
        } else {
          this.$message({
            message: 'cancel!',
            type: 'warning'
          })
          return false
        }
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    payCode(){
      if (this.form.auth_code === '0') {
        this.form.amount = ''
        this.form.auth_code = ''
        this.$refs.amount.focus()
      } else {
        this.onSubmit()
      }
    },
    authCodeFocus(){
      this.$refs.auth_code.focus()
    },
    getPaymentStatusLabel(status) {
      const statusMap = {
        1: '支付成功',
        0: '待支付',
        2: '支付失败',
        3: '支付异常'
      }
      return statusMap[status]
    },
    paymentStatusLabel(status) {
      const statusMap = {
        wxqrcode: '微信支付',
        aliqrcode: '支付宝支付',
        scan: '扫码支付'
      }
      console.log(status, statusMap[status])
      return statusMap[status]
    }
  },
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector('input').focus()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .order-history {
    width: 100%;
    margin-top: 15px;
    background-color: #304156;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-block;
  }
  /deep/ .order-current {
    width: 100%;
    margin-top: 15px;
    background-color: red;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-block;
  }
  /deep/ .permission-tag-fail {
    background-color: red;
    color: white;
    font-size: 20px;
  }

  /deep/ .permission-tag-succeed {
    background-color: green;
    color: white;
    font-size: 20px;
  }

  /deep/ .permission-tag-wait {
    background-color: gray;
    color: white;
    font-size: 20px;
  }
</style>

